<template>
  <div class="">
    <div class="wrap reason">
		<p class="title">
			成绩<span>不理想</span>?我们帮您找原因
		</p>
		<div class="content">
			<ul>
				<li>
					<div class="left">
						<img src="static/img/img-m-01.png" alt="">
					</div>
					<div class="right">
						<p class="top">基础薄弱<br>学习困难</p>
						<p class="sub">课堂时间短老师</p>
						<p class="sub">讲的快，学起来吃力</p>
					</div>
				</li>
				<li class="li-r">
					<div class="right">
						<p class="top">粗心马虎<br>失误不断</p>
						<p class="sub">审题不清粗心</p>
						<p class="sub">大意，考试总失分</p>
					</div>
					<div class="left">
						<img src="static/img/img-m-02.png" alt="">
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<div class="left">
						<img src="static/img/img-m-03.png" alt="">
					</div>
					<div class="right">
						<p class="top">效率低下<br>苦学无果</p>
						<p class="sub">找不到方法苦苦</p>
						<p class="sub">学习，成绩没提高</p>
					</div>
				</li>
				<li class="li-r">
					<div class="right">
						<p class="top">生搬硬套<br>连蒙带猜</p>
						<p class="sub">不会归纳总结例题</p>
						<p class="sub">会做了，考试做不来</p>
					</div>
					<div class="left">
						<img src="static/img/img-m-04.png" alt="">
					</div>
				</li>
			</ul>
		</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      
    }
  },
  components: {
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.reason {
	background-color: rgb(248,248,248);
	padding-bottom: .46rem;
}
.reason .title {
	padding-top: .64rem;
	font-family: '微软雅黑';
	font-size: .3rem;
	color: #5d5d5d;
	letter-spacing: 1px;
}
.reason .title span {
	color: #fead29;
	font-weight: bold;
}
.reason .content {
	margin-top: .32rem;
	padding: 0 .2rem;
}
.reason .content ul {
	display: flex;
}
.reason .content ul:after {
	content: '';
	display: block;
	clear: both;
}
.reason .content ul li {
	display: flex;
	float: left;
	margin-top: .08rem;
	/*width: 3.51rem;*/
	list-style: none;
	background-color: #fff;
}
.reason .content ul li.li-r {
	margin-left: .08rem;
}
.reason .content ul li.li-r img,.reason .content ul li .left img {
	height: 100%;
}
.reason .content ul li .left {
	flex: 1;
	font-size: 0;
}
.reason .content ul li .right {
	width: 2.01rem;
}
.reason .content ul li .right .top {
	font-family: 'AdobeHeitiStd-Regular';
	font-size: .24rem;
	color: #646464;
	padding: 5px 0;
	font-weight: bold;
}
.reason .content ul li .right .sub {
	font-family: 'AdobeHeitiStd-Regular';
	font-size: .20rem;
	color: #aeaeae;
}
</style>